/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<!--
 * @Author: zhb
 * @Date: 2020-08-28
 * @Description: 过滤算子表单配置
 -->
<template>
    <div class="filter__form operate_form">
        <sf-form ref="filterForm"
                 class="drawer-form__container"
                 :label-width="80">
            <div class="filter-list">
                <div v-for="(item,index) in filterList"
                     :key="index"
                     class="filter-item">
                    <sf-select v-model="item.name"
                               :default-width="120"
                               :allow-blank="false"
                               :placeholder="_('字段名称')"
                               :allow-search="true"
                               :default-disabled="disabledStatus"
                               :options="fieldList" />
                    <sf-select v-model="item.opr"
                               :default-width="72"
                               :allow-blank="false"
                               :placeholder="_('操作符')"
                               :default-disabled="disabledStatus"
                               :options="oprList" />
                    <sf-textfield
                        ref="fieldName"
                        v-model="item.value"
                        :default-width="148"
                        :max-length="30"
                        :allow-blank="false"
                        :utf8-length="false"
                        :blur-trim="true"
                        :default-disabled="disabledStatus"
                        :placeholder="_('字段值')" />
                    <span class="icon iconfont iconqingkong remove"
                          @click="_removeFilterItem(index)"></span>
                </div>
                <div class="add-filter"
                     @click="_addFilterItem">
                    <span class="icon iconfont iconsip-add"></span>
                </div>
            </div>
        </sf-form>
        <div v-if="!disabledStatus && showOperateBtn"
             class="add-operate__btn">
            <sf-button-primary
                class="btn-primary m-r10"
                @click.native="_submit">
                <lang>确定</lang>
            </sf-button-primary>
            <sf-button @click.native="_cancel">
                <lang>取消</lang>
            </sf-button>
        </div>
    </div>
</template>

<script lang=ts>
import { Component, Vue, Ref } from 'vue-property-decorator';
import { deepClone } from 'src/util/deep_clone';
import {
    NORMAL_FILTER_DATA
} from 'src/home/mod_cluster/project_manager/feature_manager/const_data';
import { SfForm } from '@sxf/sf-vue-component';


interface FilterObj{
    name: string;
    opr: string;
    value: string;
}

@Component({
    name: 'FilterForm'
})
export default class FilterForm extends Vue {
    @Ref() filterForm!: SfForm

    formData = { ...NORMAL_FILTER_DATA }


    // TODO: REMOVE ANY
    dateTime: string[] = []
    oprList = [{
        label:_('等于'),
        value:'='
    }, {
        label:_('不等于'),
        value:'!='
    }, {
        label:_('大于'),
        value:'>'
    }, {
        label:_('小于'),
        value:'<'
    }]

    // TODO: REMOVE ANY
    filterList: FilterObj[] = [{
        name:'',
        opr:'',
        value:''
    }]
    disabledStatus = false
    showOperateBtn = false
    fieldList = []
    timeFieldList = []

    _removeFilterItem (index: number) {
        this.filterList.splice(index, 1);
    }
    _addFilterItem () {
        this.filterList.push({
            name:'',
            opr:'',
            value:''
        });
    }
    reset () {
        this.formData = deepClone(NORMAL_FILTER_DATA);

        // this.clearInvalidMsg();
    }

    // clearInvalidMsg () {
    //     this.$nextTick(() => {
    //         this.$refs.filterForm?.clearInvalid();
    //     });
    // },
    getFilterList () {
        let filterList = this.filterList;
        let list: string[] = [];
        for (let i = 0; i < filterList.length; i++) {
            let value = filterList[i].value + '';
            list[i] = `${filterList[i].name}${filterList[i].opr}'${value}'`;
        }
        this.formData.conditions = JSON.stringify(list);
    }
    getJsonValue () {
        this.getFilterList();
        return this.formData;
    }

    _submit () {
        this.getFilterList();
        this.$emit('operate-submit', this.formData);
    }
    _cancel () {
        this.$emit('operate-cancel');
    }
    setFieldList (data) {
        this.fieldList = data;
        this.timeFieldList = data;
    }

    isValid () {
        return this.filterForm.isValid();
    }
};
</script>

<style lang="less">
    .filter__form{
        .add-condition__date-picker {
            width: 310px;
            height: 30px;
            border-radius:0;
            &.allowblank-error {
                border: 1px solid #f55151;
            }
            .el-range-input {
                width: 134px;
            }
            .el-range-separator {
                width: 24px;
            }
            .el-range__close-icon {
                display: none;
            }
        }
        .filter-list{
            .remove{
                cursor: pointer;
                &:hover{
                    color: #204ed9
                }
            }
            .filter-item{
                margin-bottom: 10px;
            }
            .sfv-select{
                margin-right: 6px;
            }
            .add-filter{
                width: 360px;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 30px;
                border: 1px dashed rgba(73,80,96,0.3);
                border-radius: 2px;
                cursor: pointer;
                .iconsip-add{
                    color: inherit;
                }
            }
        }
    }
</style>

